<script setup>
import { defineProps } from 'vue'
defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  img_url: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="card">
    <div class="card__content">
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>
    <figure class="card__svg">
      <img :src="img_url" alt="插图" />
    </figure>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/_mixins';

.card {
  @include gridCenter;
  grid-template-columns: minmax(min-content, 40rem) min-content;
  gap: 1rem;

  .card__content {
    h3 {
      font-size: 3.5rem;
      margin-bottom: 2rem;
    }
    p {
      font-size: 2.3rem;
      line-height: 1.5;
    }
  }
  .card__svg {
    width: 30rem;
    height: 30rem;
    img {
      width: 100%;
      object-fit: cover;
    }
  }
}
</style>
